<template>
  <div data-tauri-drag-region class="titlebar">
    <div data-tauri-drag-region class="titlebar_left">{{ title }}</div>
    <div data-tauri-drag-region class="titlebar_right">
      <div class="titlebar-button" id="titlebar-minimize">
        <img src="@/assets/svg/titlebar/mdi_window-minimize.svg" alt="minimize" />
      </div>
      <div class="titlebar-button" id="titlebar-maximize">
        <img src="@/assets/svg/titlebar/mdi_window-maximize.svg" alt="maximize" />
      </div>
      <div class="titlebar-button" id="titlebar-close">
        <img src="@/assets/svg/titlebar/mdi_close.svg" alt="close" />
      </div>
    </div>
  </div>
</template>
<script setup name="CustomizeTitlebar">
import { onMounted, ref } from "vue";
import { getCurrentWindow } from "@tauri-apps/api/window";

const { VITE_APP_TITLE } = import.meta.env;
const title = ref(VITE_APP_TITLE);
const appWindow = getCurrentWindow();
onMounted(() => {
  windowCustomize();

});


const windowCustomize = () => {
  let minimizeEle = document.getElementById("titlebar-minimize");
  minimizeEle?.addEventListener("click", () => appWindow.minimize());

  let maximizeEle = document.getElementById("titlebar-maximize");
  maximizeEle?.addEventListener("click", () => appWindow.toggleMaximize());

  let closeEle = document.getElementById("titlebar-close");
  closeEle?.addEventListener("click", () => appWindow.close());
};
</script>
<style scoped lang="less">
@spilc: 1rem;
@themeColor: #329ea3;

.titlebar {
  height: 40px;
  background: @themeColor;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 666;
  align-items: center;

  .titlebar_left {
    padding-left: @spilc;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #ffffff;
    font-weight: 700;
  }

  .titlebar_right {

    .titlebar-button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 30px;
      height: 30px;
      user-select: none;
      -webkit-user-select: none;
    }

    .titlebar-button:hover {
      background: #5bbec3;
    }
  }

}
</style>
